
<!-- BUG待处理 2021 2 26 -->
<!-- 下拉刷新 -->
<template>
  <div class="onekit-scroll-view"
       :class="`${onekitClass} ${scrollX ? 'onekit-scroll-view-x' : '' }`"
       :style="onekitStyle"
       :id="onekitId"
       @touchmove="scroll"
       ref="dom">
    <slot></slot>
  </div>
</template>

<script>
/* eslint-disable vue/require-prop-type-constructor */
import weixin_behavior from "../../behaviors/weixin_behavior"
import onekit_behavior from "../../behaviors/onekit_behavior"
export default {
  name: "onekit-scroll-view",
  data: () => ({
    duoubelRun: false
  }),
  mixins: [weixin_behavior, onekit_behavior],
  props: {
    'scroll-x': {
      type: String | Boolean,
      default: false
    },
    'scroll-y': {
      type: String | Boolean,
      default: false
    },
    'scroll-with-animation': {
      type: String | Boolean,
      default: false
    },
    'upper-threshold': {
      type: [String, Number],
      default: 50
    },
    'lower-threshold': {
      type: [String, Number],
      default: 50
    },
    'scroll-top': [String, Number],
    'scroll-left': [String, Number],
    'scroll-into-view': String,
  },
  methods: {
    scroll (e) {
      let scrollDate
      let scrollHeight = 0
      let offsetLeft = 0
      let offsetTop = 0
      let deltax = 0
      let deltay = 0
      let scrollTop = 0
      let scrollLeft = 0
      if (this.scrollY) {
        scrollHeight = e.changedTouches[0].screenY
        offsetTop = 67
        deltay = 2
        scrollTop = e.changedTouches[0].radiusY
      } else {
        deltay = 2
        offsetLeft = Math.round(Math.abs(e.changedTouches[0].screenX) / 10)
        scrollLeft = e.changedTouches[0].radiusX
      }
      scrollDate = {
        datasett: {
          id: '',
          offsetLeft,
          offsetTop
        },
        detail: {
          deltax,
          deltay,
          scrollHeight,
          scrollLeft,
          scrollTop,
          scrollWidth: window.screen.width
        },
        mark: {},
        mut: false,
        target: {
          id: '',
          offsetLeft,
          offsetTop,
          dataset: {}
        },
        timeStamo: new Date().getTime(),
        type: 'scroll',
        _userTap: false
      }

      if (this.$refs.dom.children[0].getBoundingClientRect().left == (window.innerWidth - this.$refs.dom.clientWidth) / 2 ||
        this.$refs.dom.children[0].innerHeight + this.$refs.dom.children[0].offsetTop > this.$refs.dom.innerHeight) {
        if (!this.duoubelRun) {
          scrollDate.type = 'scrolltoupper'
          this.$emit('Scrolltoupper', scrollDate)
          this.duoubelRun = true
          setTimeout(() => {
            this.duoubelRun = false
          }, 2000)
        }
      }

      if (this.$refs.dom.children[this.$refs.dom.children.length - 1]
        .getBoundingClientRect().left === (window.innerWidth - this.$refs.dom.clientWidth) / 2 ||
        this.$refs.dom.children[this.$refs.dom.children.length - 1].innerWidth + this.$refs.dom.children[this.$refs.dom.children.length - 1].offsetLeft > this.$refs.dom.innerWidth) {
        if (!this.duoubelRun) {
          scrollDate.type = 'scrolltolower'
          this.$emit('Scrolltolower', scrollDate)
          this.duoubelRun = true
          setTimeout(() => {
            this.duoubelRun = false
          }, 2000);
        }
      }

      if (this.$refs.dom.children[0].getBoundingClientRect().left == this.upperThreshold ||
        this.$refs.dom.children[0].innerHeight + this.$refs.dom.children[0].offsetTop == this.upperThreshold) {
        if (!this.duoubelRun) {
          scrollDate.type = 'scrolltoupper'
          this.$emit('Scrolltoupper', scrollDate)
          this.duoubelRun = true
          setTimeout(() => {
            this.duoubelRun = false
          }, 2000)
        }
      }


      if (this.$refs.dom.children[this.$refs.dom.children.length - 1]
        .getBoundingClientRect().left === this.upperThreshold ||
        this.$refs.dom.children[this.$refs.dom.children.length - 1].innerWidth + this.$refs.dom.children[this.$refs.dom.children.length - 1].offsetLeft > this.upperThreshold) {
        if (!this.duoubelRun) {
          scrollDate.type = 'scrolltolower'
          this.$emit('Scrolltolower', scrollDate)
          this.duoubelRun = true
          setTimeout(() => {
            this.duoubelRun = false
          }, 2000);
        }
      }

      this.$emit('Scroll', scrollDate)
    }
  }
}
</script>

<style>
.onekit-scroll-view-x {
  display: flex !important;
}

.onekit-scroll-view-x > div {
  flex-grow: 0;
  flex-shrink: 0;
}
</style>
